import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import Breadcrumb from '../base/Breadcrumb';
import Select from '../base/Select';
import { Input, Button, MessageBox, Form, Upload } from 'element-react';

class sellerOPerate extends Component {
  constructor (props) {
    super(props);
    
    this.state = {
      form: {
        shopName: '',
        brandName: '',
        productCategory: [{
          option1: '',
          option2: '',
          option3: ''
        }],
        shopType: '',
        phone: '',
        remark: '',
        shopIntroduce: '',
        deliveryArea: '',
        businessLicense: '',
        businessLicenseAndOfficialSeal: ''
      },
      productCategory1: [{
        value: 'aa',
        label: '广东省'
      }, {
        value: 'bb',
        label: '湖南省'
      }],
      productCategory2: [{
        value: 'cc',
        label: '广州'
      }, {
        value: 'dd',
        label: '汕头'
      }, {
        value: 'ee',
        label: '潮州'
      }],
      productCategory3: [{
        value: 'ff',
        label: '金平区'
      }, {
        value: 'gg',
        label: '龙湖区'
      }],
      shopType: [{
        value: '1',
        label: '自营店'
      }, {
        value: '2',
        label: '专卖店'
      }]
    };
  }
  
  // 增加商品类目
  addProductCategory () {
    this.state.form.productCategory.push({
      option1: '',
      option2: '',
      option3: ''
    });
    
    this.forceUpdate();
  }
  
  // 删除商品类目
  removeProductCategory (index) {
    if (this.state.form.productCategory.length === 1) {
      return
    }
    MessageBox.confirm('确认删除该商品类目吗', '提示', {
      type: 'warning'
    }).then(() => {
      this.state.form.productCategory.splice(index, 1);
      this.forceUpdate();
    }).catch(() => {
    });
  }
  
  // 填写文本框
  handleInputChange (key, value) {
    this.state.form[key] = value
    this.forceUpdate()
  }
  
  // 选择商品类目
  handleProductCategoryChange (index, attr, value) {
    this.state.form.productCategory[index]['option' + attr] = value;
  }
  
  // 选择店铺类型
  handleShopTypeChange (value) {
    this.state.form.shopType = value
  }
  
  onCancel () {
    this.refs.form.resetFields();
    this.props.history.go(-1)
  }
  
  onSubmit () {
    
  }
  
  render () {
    const width = {
      width: 400
    };
    
    return (
      <div>
        <Breadcrumb data={['商家管理', '商家列表', '新增']}/>
        {/*表单*/}
        <Form ref="form" className="content" model={this.state.form} labelPosition="right" labelSuffix="：" labelWidth="180" onSubmit={this.onSubmit.bind(this)}>
          <Form.Item label="店铺名称" prop="shopName">
            <Input
              value={this.state.form.shopName}
              placeholder="请输入店铺名称"
              size="small"
              className="inputSmall"
              onChange={this.handleInputChange.bind(this, 'shopName')}
            />
          </Form.Item>
          <Form.Item label="品牌名称" prop="brandName">
            <Input
              value={this.state.form.brandName}
              placeholder="请输入品牌名称"
              size="small"
              className="inputSmall"
              onChange={this.handleInputChange.bind(this, 'brandName')}
            />
          </Form.Item>
          {
            this.state.form.productCategory.map((el, index) => {
              return (
                <Form.Item className="inputRow" key={index} label={index === 0 ? '商品类目' : ''} prop={`productCategory:${index}`}>
                  <Select className="inputCol" value={el.option1} options={this.state.productCategory1} select={this.handleProductCategoryChange.bind(this, index, '1')}></Select>
                  <div className="width20"></div>
                  <Select className="inputCol" value={el.option2} options={this.state.productCategory2} select={this.handleProductCategoryChange.bind(this, index, '2')}></Select>
                  <div className="width20"></div>
                  <Select className="inputCol" value={el.option3} options={this.state.productCategory3} select={this.handleProductCategoryChange.bind(this, index, '3')}></Select>
                  <div className="width20"></div>
                  <Button type="danger" onClick={this.removeProductCategory.bind(this, index)}>删除</Button>
                </Form.Item>
              )
            })
          }
          <Form.Item>
            <Button type="primary" onClick={this.addProductCategory.bind(this)}>增加</Button>
          </Form.Item>
          <Form.Item label="店铺类型" prop="shopType">
            <Select value={this.state.form.shopType} options={this.state.shopType} select={this.handleShopTypeChange.bind(this)}></Select>
          </Form.Item>
          <Form.Item label="联系电话" prop="phone">
            <Input
              value={this.state.form.phone}
              placeholder="请输入联系电话"
              size="small" 
              className="inputSmall"
              onChange={this.handleInputChange.bind(this, 'phone')}
            />
          </Form.Item>
          <Form.Item label="备注" prop="remark">
            <Input
              type="textarea"
              style={width}
              autosize={{ minRows: 4, maxRows: 8}}
              value={this.state.form.remark}
              onChange={this.handleInputChange.bind(this, 'remark')}
            />
          </Form.Item>
          <Form.Item label="店铺介绍" prop="shopIntroduce">
            <Input
              type="textarea"
              style={width}
              autosize={{ minRows: 4, maxRows: 8}}
              value={this.state.form.shopIntroduce}
              onChange={this.handleInputChange.bind(this, 'shopIntroduce')}
            />
          </Form.Item>
          <Form.Item label="发货地区" prop="deliveryArea">
            <Input
              value={this.state.form.deliveryArea}
              placeholder="请输入发货地区"
              size="small"
              className="inputSmall"
              onChange={this.handleInputChange.bind(this, 'deliveryArea')}
            />
          </Form.Item>
          <Form.Item label="营业执照副本" prop="businessLicense">
            <div style={width}>
              <Upload
                className="upload-demo"
                action="http://tft-dev/api/upload/file"
                onSuccess={(response, file, fileList) => this.handleSuccess(response, file, fileList)}
                onError={(err, file, fileList) => this.handleError(err, file, fileList)}
                listType="picture"
                onRemove={() => {console.log(111)}}
                fileList={[{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg'}]}
              >
                <Button size="small" type="primary">点击上传</Button>
              </Upload>
            </div>
          </Form.Item>
          <Form.Item label="营业执照加盖公章副本" prop="businessLicenseAndOfficialSeal">
            <div style={width}>
              <Upload
                className="upload-demo"
                action="http://tft-dev/api/upload/file"
                onSuccess={(response, file, fileList) => this.handleSuccess(response, file, fileList)}
                onError={(err, file, fileList) => this.handleError(err, file, fileList)}
                listType="picture"
                onRemove={() => {console.log(111)}}
                fileList={[{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg'}]}
              >
                <Button size="small" type="primary">点击上传</Button>
              </Upload>
            </div>
          </Form.Item>
          <Form.Item>
            <Button type="primary" nativeType="submit">保存</Button>
            <Button onClick={this.onCancel.bind(this)}>取消</Button>
          </Form.Item>
        </Form>
      </div>
    )
  }
}
export default withRouter(sellerOPerate)